import React, {Component} from 'react';
import {httpClient} from '../utils/request';

class FeishuDoc extends Component {

    async componentDidMount(): Promise<void> {

        const content = await httpClient.get({
            url: '/auth/authenDocSdk',
            tokenType: '',
        });
        const {data} = (content as any)['data'];
        data['jsApiList'] = ['DocsComponent'];
        console.log(data);
        const win = (window as any);
        const {config} = win.webComponent;
        config(data).then((_res: any) => {
            console.log(_res);
            win.addOpenDocDynamical = function () {
                // 动态渲染，返回组件实例。下面以云文档组件为例。
                win.webComponent.render(
                    'DocsComponent',
                    {
                        src: 'https://h8sbodcroc.feishu.cn/docs/doccnHTcK30QLPguvKtS9HGe5qg',
                        height: '800px',
                    },
                    document.querySelector('#feishu-doc'),
                );
            };
            win.addOpenDocDynamical();
        }).catch((err: Error) => {
            console.log(err);
        });
    }


    render(): React.ReactNode {
        return (
            <>
                <div id="feishu-doc"/>
            </>
        );
    }
}

export default FeishuDoc;
